<template>
  <div class="asideContainer">
    <!-- 头部用户信息部分 -->
    <div class="user">
      <el-image
        v-show="visible === 'mini'"
        style="
          width: 42px;
          height: 42px;
          padding-top: 4px;
          padding-bottom: 10px;
        "
        :src="logoUrl"
        fit="fill"
      />
      <el-avatar :size="avatarSize" :src="avatarPath" />
      <div class="nickname" v-show="visible === 'open'">
        {{ useUserInfoStore().nickname }}
      </div>
      <div class="description" v-show="visible === 'open'">
        &nbsp;&nbsp;&nbsp;&nbsp;{{ useUserInfoStore().description }}
      </div>
    </div>

    <!-- 页面功能导航栏部分 -->
    <div class="itemList">
      <div
        class="item"
        v-for="item in asideItems"
        :key="item.label"
        :id="currentPath == item.path ? 'active' : ''"
        @click="navigateTo(item.path)"
      >
        <LogoImg
          :logoUrl="item.logoUrl"
          :title="item.title"
          :message="item.message"
        />
        <div class="label">{{ item.label }}</div>
      </div>
    </div>

    <!-- 底部工具栏部分 -->
    <div class="setting">
      <el-icon size="26" title="设置" @click="navigateTo('/setting')">
        <Tools />
      </el-icon>

      <el-icon
        size="26"
        title="收缩"
        v-show="visible === 'open'"
        @click="toggleSide"
      >
        <DArrowLeft />
      </el-icon>
      <el-icon
        size="26"
        title="展开"
        v-show="visible === 'mini'"
        @click="toggleSide"
      >
        <DArrowRight />
      </el-icon>
    </div>
  </div>
</template>

<script lang="tsx" setup>
import { ref, watch, defineComponent, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Tools, DArrowLeft, DArrowRight } from '@element-plus/icons-vue'
import { storeToRefs } from 'pinia'
import localforage from 'localforage'
import {
  useUserInfoStore,
  useEnduringSseStore,
  useThemeStore,
} from '@/features/store/store'
import logoUrl from '@/assets/image/发展历程.png'
import Home from '@/assets/image/Home.png'
import Harvest from '@/assets/image/Harvest.png'
import Project from '@/assets/image/Project.png'
import Friend from '@/assets/image/Friend.png'
import Message from '@/assets/image/Message.png'
import { sourceUrl } from '@/config/baseConfig'

// logo图片组件
const LogoImg = defineComponent({
  props: {
    logoUrl: { type: String, default: '' },
    title: { type: String, default: '' },
    message: { type: Boolean, default: false },
  },
  setup(props) {
    const { notReadCount } = storeToRefs(useEnduringSseStore())
    const { buttonColor } = storeToRefs(useThemeStore())

    const styleone = {
      width: '26px',
      height: '26px',
      paddingLeft: '22px',
      paddingRight: '18px',
    }

    return () => (
      <div style={{ position: 'relative' }}>
        <el-image
          title={props.title}
          style={styleone}
          src={props.logoUrl}
          fit="fill"
        />

        {!props.message ? (
          ''
        ) : (
          <div
            v-show={props.message === true}
            style={{
              position: 'absolute',
              top: '-15px',
              right: '-2px',
              borderRadius: '50%',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              width: '20px',
              height: '20px',
              backgroundColor: buttonColor.value,
              color: 'white',
              fontWeight: 'bold',
              fontSize: '12px',
            }}
          >
            {notReadCount.value}
          </div>
        )}
      </div>
    )
  },
})

const props = defineProps({
  // 侧边栏显示情况
  visible: { type: String, default: 'mini' },
})

const emitEvents = defineEmits(['toggleAside', 'scroll'])
const router = useRouter()
const route = useRoute()

interface asideItemItf {
  label: string
  title: string
  path: string
  logoUrl: string
  message?: boolean
}
// 侧边栏列表
const asideItems: asideItemItf[] = [
  { label: 'Home', title: '首页', path: '/home', logoUrl: Home },
  { label: 'Harvest', title: '收获', path: '/harvest', logoUrl: Harvest },
  { label: 'Project', title: '项目', path: '/project', logoUrl: Project },
  { label: 'Friend', title: '好友', path: '/friend', logoUrl: Friend },
  {
    label: 'Message',
    title: '消息',
    path: '/subreact/chatting',
    logoUrl: Message,
    message: true,
  },
]

// 当前路路径
const currentPath = ref<string>(route.path)
// 监听当前路径
watch(
  () => route.path,
  (newVal) => {
    currentPath.value = newVal
    scrollWindow()
  }
)

// 路由跳转
const navigateTo = (path: string) => router.push(path)

// 切换侧边栏
const toggleSide = () => emitEvents('toggleAside')
// 滚动窗口
const scrollWindow = () => emitEvents('scroll')

// 侧边栏宽度
const width = ref<'240px' | '70px'>('70px')
// 控制需要隐藏的元素
const display = ref<'' | 'none'>('none')
// 用户信息框高度
const userHeight = ref<'180px' | '120px'>('120px')

// 监听侧边栏展开情况
watch(
  () => props.visible,
  () => {
    if (props.visible === 'mini') {
      display.value = 'none'
      width.value = '70px'
      userHeight.value = '120px'
      avatarSize.value = 52
    }
    if (props.visible === 'open') {
      display.value = ''
      width.value = '240px'
      userHeight.value = '180px'
      avatarSize.value = 64
    }
  }
)

const { avatar } = storeToRefs(useUserInfoStore())
const avatarPath = ref<string>('')
// 头像大小
const avatarSize = ref<number>(52)

onMounted(() => {
  // @ts-ignore
  localforage.getItem('userInfoCache', (err, value) => {
    avatarPath.value = (value as userInfoCacheItf).avatar.path
  })
})
watch(
  () => avatar.value,
  () => (avatarPath.value = sourceUrl + avatar.value)
)
</script>

<style lang="less" scoped>
@fontstyle: comic Sans MS, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
  Oxygen, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;

.asideContainer {
  width: v-bind('width');
  transition: 0.6s;
  height: 100%;
  background-color: var(--theme-aside);
  display: flex;
  flex-direction: column;

  > .user {
    widows: 100%;
    height: v-bind('userHeight');
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: 0.6s;
    position: relative;

    &::after {
      content: '';
      background-color: var(--theme-header);
      height: 2px;
      width: 100%;
      position: absolute;
      bottom: -1%;
    }
    > .nickname {
      font-family: @fontstyle;
      font-weight: bold;
      margin-top: 6px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 200px;
      text-align: center;
      color: #50504e;
    }
    > .description {
      font-family: @fontstyle;
      font-weight: bold;
      font-size: 14px;
      margin-top: 5px;
      padding-left: 10%;
      padding-right: 10%;
      color: #5d5d5c;
    }
  }

  > .itemList {
    flex: 1;
    transition: 0.6s;

    > .item {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      height: 60px;
      cursor: pointer;
      position: relative;
      user-select: none;

      &:hover {
        &::before {
          content: '';
          background-color: var(--theme-hover-label);
          height: 70%;
          width: 4px;
          position: absolute;
          left: 5%;
        }

        > .label {
          scale: 1.2;
          transition: 0.2s;
          color: var(--theme-hover-label);
        }
      }

      > .label {
        display: v-bind('display');
        font-family: @fontstyle;
      }
    }

    > #active {
      color: var(--theme-active-label);

      &::before {
        content: '';
        background-color: var(--theme-active-label);
        height: 70%;
        width: 4px;
        position: absolute;
        left: 5%;
      }
      &:hover {
        color: var(--theme-active-label);
        .label {
          color: var(--theme-active-label);
        }
      }

      > .label {
        scale: 1.2;
      }
    }
  }

  > .setting {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 50px;
    background-color: var(--theme-footer);
    transition: 0.6s;

    > .el-icon {
      cursor: pointer;
      color: #4f4e4e;
      &:hover {
        color: black;
        scale: 1.1;
      }
    }
  }
}
</style>
